<template>
    <div class="BBox">
        <div class="top">
            <span class="sizea">购物车</span>
            <span class="sizeb">管理</span>
        </div>
        <div class="roon">
            <div v-for="item in list" :key="item._id" class="roons">
                <van-checkbox v-model="item.Tisnow" checked-color="#101010" @click="() => {
                    item.children.forEach(items => {
                        items.isnow = item.Tisnow
                    })
                    let now = list.every(itemsa => {
                        return itemsa.Tisnow
                    })
                    isasnow = now
                    changeList()
                }"><van-icon name="wap-home" /><span class="sizec">{{ item.Tname
                        }}</span></van-checkbox>
                <div v-for="items in item.children" :key="items._id">
                    <div>
                        <div class="rbox01">
                            <div class="rinp">
                                <van-checkbox v-model="items.isnow" checked-color="#101010" @click="() => {
                                    item.Tisnow = item.children.every(itema => {
                                        return itema.isnow
                                    })
                                    isasnow = list.every(itemsa => {
                                        return itemsa.Tisnow
                                    })
                                    changeList()
                                }"></van-checkbox>
                            </div>
                            <div class="rboxx">
                                <div>
                                    <img :src="items.Iurl" alt="" class="Img">
                                </div>
                                <div class="rbcon">
                                    <span class="rsize01">特价</span>
                                    <span class="rsize02">国潮新款长裙，汉服套装，新款特价</span>
                                </div>
                                <div class="right">
                                    <div>
                                        <span class="rsize03">￥{{ items.newprice.toFixed(2) }}</span>
                                    </div>
                                    <div>
                                        <span class="rsize04">已降{{ items.price - items.newprice }}</span>
                                    </div>
                                    <div>
                                        <div class="rsize05">x{{ items.num }}</div>
                                    </div>
                                    <div>
                                        <div class="rsize06">税费: {{ items.newprice / 100 * 16 }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="boxbet">
                    <div class="rsize07">活动优惠: ￥{{ getnum(item.children) }}</div>
                    <div class="rsize07">本店总计(不含税): ￥{{ getnums(item.children) }}</div>
                </div>
            </div>
        </div>
        <div class="botmf">
            <div class="botmf01">
                <div class="raas">
                    <van-checkbox v-model="isasnow" @click="() => {
                        list.forEach(item => {
                            item.Tisnow = isasnow;
                            item.children.forEach(items => {
                                items.isnow = isasnow;
                            })
                        })
                        changeList()
                    }">全选</van-checkbox>
                </div>
                <div class="heis">
                    <div class="bsizes">总计(不含税):<span class="sizecs">￥{{ getnumss() }}</span></div>
                    <div class="spsf">商品税费: ￥{{ getnumssc() }} </div>
                </div>
                <div>
                    <button class="btnaa" @click="ars()">结算({{ getnumssa() }})</button>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup name="CartView">
import { onMounted, reactive, ref } from 'vue';
import axios from '../../utils/axios';
import router from '@/router';
const isasnow = ref(false)
const list = ref([])
const getlist = () => {
    axios.get('/list').then(res => {
        console.log(res);
        list.value = res.data.list
        console.log(list.value);
    })
}
const ars = () => {
    let listc = []
    list.value.forEach(item => {
        item.children.forEach(items => {
            if (items.isnow) {
                listc.push(items)
            }
        })
    })
    localStorage.setItem('listc',JSON.stringify(listc))
    router.push('/detail')
}
const getnumssa = () => {
    let num = 0
    list.value.forEach(item => {
        item.children.forEach(items => {
            if (items.isnow) {
                num += 1
            }
        });
    })
    return num
}
const getnumss = () => {
    let num = 0
    console.log(list.value);
    list.value.forEach(item => {
        item.children.forEach(items => {
            if (items.isnow) {
                num += items.newprice
            }
        });
    })
    return num
}
const getnumssc = () => {
    let num = 0
    list.value.forEach(item => {
        item.children.forEach(items => {
            if (items.isnow) {
                num += items.price - items.newprice
            }
        });
    })
    return num
}
const getnum = (list) => {
    let num = 0
    list.forEach(item => {
        if (item.isnow) {
            num += item.price - item.newprice
        }
    });
    return num
}

const getnums = (list) => {
    let num = 0
    list.forEach(item => {
        if (item.isnow) {
            num += item.newprice
        }
    });
    return num
}
const addCart = async () => {
    let { data } = await axios.post('/add', {
        Tname: "国潮小店", Tisnow: false, children: [
            { name: '国潮新款长裙，汉服套装，新款特价', newprice: 1690, price: 2109, Iurl: "https://img2.baidu.com/it/u=2884007697,2084353768&fm=253&fmt=auto&app=138&f=JPG?w=500&h=649", num: 1, isnow: false }
        ]
    })
    console.log(data);
}
onMounted(() => {
    getlist()
})

const changeList = () => {
    let lista = new Array(list)
    axios.put('/change', {
        lista
    })
}
</script>

<style lang='less' scoped>
.heis {
    width: 135px;
}

.van-checkbox {
    --van-checkbox-checked-icon-color: #000
}

.btnaa {
    width: 106px;
    height: 51px;
    line-height: 20px;
    background-color: rgba(229, 28, 35, 1);
    color: white;
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    border: 0px solid rgba(187, 187, 187, 1);
    margin-left: 22px;
}

.sizecs {
    color: #E51C23;
}

.spsf {
    font-size: 12px;
    color: #B3B3B3;
    width: 134px;
    text-align: right;
}

.asizes {
    font-size: 13px;
}

.bsizes {
    font-size: 14px;
    height: 20px;
    margin-top: 18px;
    text-align: right;
}

.raas {
    margin-top: 6px;
    margin-left: 18px;
    margin-right: 7px;
}

.botmf {
    position: fixed;
    bottom: 70px;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
}

.botmf01 {
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-around;
}

.BBox {
    height: 100vh;
}

.rboxx {
    display: flex;
    margin-left: 5px;

}

.rboxx .Img {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    margin-top: 13px;
}

.rbcon {
    margin-left: 10px;
    height: 70px;
    vertical-align: text-top;

}

.rsize02 {
    font-size: 13px;
}

.rsize03 {
    font-size: 13px;
    font-weight: bold;
}

.rsize04 {
    font-size: 12px;
    margin-left: 15px;
    color: #EC8793;
}

.rsize05 {
    font-size: 12px;
    width: 100%;
    text-align: right;
}

.rsize06 {
    font-size: 12px;
    width: 77px;
    color: #B3B3B3;
}

.rsize07 {
    font-size: 13px;

}

.boxbet {
    width: 100%;
    text-align: right;
    margin-top: 22px;
}

.rbox01 {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    margin-top: 17px;
    justify-content: space-between;
}

.rsize01 {
    font-size: 12px;
    margin: 0 10px;
    color: #FA788F;
}

.van-card {
    height: 49px;
    background: white;
    line-height: 49px;
    color: black;
}

.sizea {
    font-size: 20px;
}

.sizeb {
    font-size: 16px;
}


.top {
    height: 49px;
    line-height: 49px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

.roon {
    margin-top: 21px;
}

.roons {
    min-height: 200px;
    padding: 0 18px;
    box-sizing: border-box;
}

.sizec {
    margin-left: 10px;
}

.rbox1 {
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
}

.rron-dl {
    display: flex;
    width: 240px;
    height: 100px;
}

.rron-dl dt {
    margin-top: 22px;
}

.rron-dl dt img {
    width: 50px;
    height: 50px;
}

.rron-dl dd p {
    margin-left: 10px;
    color: rgb(16, 16, 16);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.rpjj {
    width: 47px;
    height: 16px;
    line-height: 16px;
    color: rgba(236, 135, 147, 1);
    font-size: 11px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.rpnp {
    width: 58px;
    height: 16px;
    line-height: 17px;
    color: rgba(77, 77, 77, 1);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-bold;
}

.right {
    width: 60px;
}
</style>